<template>
    <div class="demo-date-picker">
           <!-- 搜索表单 -->
          <el-form label-width="auto" style="max-width: 100%">
              <el-row>
                  <el-col :span="5">
              <el-form-item label=" 患者姓名:">
                  <el-input
                    v-model="queryDto.pname"
                    placeholder="姓名"
                  ></el-input>
              </el-form-item>
              </el-col>
              </el-row>
      <el-row style="display:flex">
          <el-button type="primary" size="small" @click="searchSysRole">
              搜索
          </el-button>
          <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
  </el-form>
            <!-- 添加按钮 -->
           <!-- <div class="tools-div">
              <el-button type="success" size="small" @click="addShow()">添 加</el-button>
          </div> -->
          <el-dialog v-model="dialogVisible" :title="tit" width="70%">
            <el-form label-width="120px">
            <el-form-item label="运动方案">
                <el-input v-model="moptis.mname"/>
            </el-form-item>

            <el-form-item label="运动类型列表">
                <el-checkbox-group v-model="MoptionandmoveList.movOptionList">
                    <el-checkbox v-for="role in ids" :key="role.id" :label="role.id" :value="role.id">
                        {{ role.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            

            <el-form-item>
                <el-button type="primary" @click="tongguo">通过</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="falseAll">取消</el-button>
            </el-form-item>
        </el-form>
      </el-dialog> 
          
          <!--- 角色表格数据 -->
          <el-table :data="list" style="width: 100%" >
            <el-table-column prop="id" label="序号" width="60" />
            <!-- <el-table-column type="index" label="序号" width="100"></el-table-column> -->
              <el-table-column prop="pname" label="患者姓名"/>
              
              <el-table-column prop="correction" label="饮食方案">
              </el-table-column>
              <el-table-column prop="mname" label="运动方案">
            </el-table-column>
              <el-table-column prop="hedirection" label="心理方案"/>
              <el-table-column label="操作" align="center" width="280" #default="scope">
              <el-button type="primary" size="small" @click="shenhe(scope.row)">
                  审核
              </el-button>
              <el-button type="danger" size="small" @click="deleteByIds(scope.row)">
                  删除
              </el-button>
              </el-table-column>
          </el-table>
  
       <!--分页条-->
  <el-pagination
                 v-model:current-page="pageParams.page"
                 v-model:page-size="pageParams.limit"
                 :page-sizes="[2,5,10, 20, 50, 100]"
                 @size-change="fetchData"
                 @current-change="fetchData"
                 layout="total, sizes, prev, pager, next"
                 :total="total"
  />
  <!-- 查看详情 -->

    </div>
  </template>
  














  <script lang="ts" setup>

  import { ref,onMounted,computed } from 'vue';
  import { ElMessage, ElMessageBox,TabsPaneContext } from 'element-plus'
  import {listgaofangan ,deleteById} from '@/api/zsg/intervention';
  import {findMoptionById,updateMoption} from '@/api/moption';
  import {findMovement} from '@/api/movement';

  // 分页条总记录数
  let total = ref(0)
  // 定义表格数据模型
  let list = ref([
  ])
  let tit=ref("")
  const pageParamsForm={
      page:1,
      limit:2,
  }
  const dialogVisible=ref(false)
  const pageParams = ref(pageParamsForm)     // 将pageParamsForm包装成支持响应式的对象
  // 搜索表单数据
  const queryDto = ref({
    pname:"",
  })

  // 页面加载完毕以后请求后端接口获取数据
  onMounted(() => {
      fetchData() ;
  })
// 搜索按钮点击事件处理函数
const searchSysRole = () => {
    fetchData() ;
}
const deleteByIds=async(row)=>{
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const {data,code,message} =await deleteById(row)
    if(code === 200) {
        ElMessage.success('操作成功')
        fetchData()
    }
    })
}
let moptis = ref({
    id:'',
    mname:''
})
const MList = {
    moption: moptis.value,
    //运动项目数据模板
    movOptionList: []
}
const MoptionandmoveList=ref(MList)
const optionById = ref([])
const shenhe=async(row)=>{
    dialogVisible.value = true
    findMovements()
    const {data} = await findMoptionById(row.mid)
    MoptionandmoveList.value.moption.id = row.id
    MoptionandmoveList.value.moption = data.moption
    moptis.value = data.moption
    optionById.value = data.yiXuan
    for (let i = 0; i < optionById.value.length; i++) {
        MoptionandmoveList.value.movOptionList.push(optionById.value[i].movId) 
    }
}
const tongguo=()=>{
    const code=200
    if(code === 200) {
            dialogVisible.value = false
            ElMessage.success('操作成功')
            fetchData()
        }
}
const submit=async()=>{
    const {code} = await updateMoption(MoptionandmoveList.value)
        if(code === 200) {
            dialogVisible.value = false
            ElMessage.success('操作成功')
            fetchData()
        }
    }
//取消按钮
const falseAll = ()=>{
    dialogVisible.value = false
    MoptionandmoveList.value.movOptionList = []
    moptis.value = {
        id:'',
        mname:''
    }
}
  // 远程调用后端分页查询接口
  const fetchData = async () => {
      const {data , code , message } = await listgaofangan(pageParams.value.page , pageParams.value.limit , queryDto.value) ;
      console.log(data.list)
      list.value = data.list ;
      total.value = data.total
      // for(let a=0;a<=data.list.length;a++){
      //     if(data.list[a].sex=='1'){
      //         list.value[a].sex='男'
      //     }else{
      //         list.value[a].sex='女'
      //     }
          
      // }
  }
  const resetData=()=>{
      queryDto.value={}
  }
  let ids = ref([])
  //查询所有运动项目
const findMovements = async()=>{
    const {data} = await findMovement()
    ids.value = data
}
  </script>
  
  <style scoped>
  .search-div {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    background-color: #fff;
  }
  
  .tools-div {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    background-color: #fff;
  }
  
  
  .el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.demo-tabs > .el-tabs__content {
  padding: 10;
  color: black;
  font-weight: 600;
}
/* .el-table {
  border-top: 1px solid black;
} */
.el-table-font{
    padding-right: 130px;
    color: black;
    margin-right: 50px;
    font-size: 20px;
}
  </style>